<template>
  <div class="index">
    <div class="container">
      <div class="foucs">
        <swiper :options="swiperOption">
          <!-- slides -->
          <swiperSlide v-for="item in foucsList" :key="item.id">
            <router-link :to="`/product/${item.id}`">
              <img :src="item.imgUrl" alt="">
            </router-link>
          </swiperSlide>
        </swiper>
        <!-- 分页器 -->
        <div class="swiper-pagination"></div>
        <!-- 轮播图左右箭头 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
        <div class="menu-nav">
          <ul>
            <li class="menu-item" v-for="item in menuList" :key="item.id">
              <a href="#" class="itemName">{{item.caty1Name}}</a>
              <div class="product-item">
                <ul>
                  <li class="product" v-for="child in navImgList" :key="child.id">
                    <router-link :to="`/product/${child.id}`" class="pro-item-name">
                      <img :src="child.imgUrl" alt="">
                      <span href="#">{{child.name}}</span>
                    </router-link>
                  </li>
                </ul>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="abs-box">
        <div class="abs-top">
          <ul>
            <li class="top-item" v-for="item in absList" :key="item.id">
              <a href="#">
                <img v-lazy="item.imgUrl" alt="">
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="attrs">
      <div class="container">
        <div class="banner">
          <a href="#">
            <img src="imgs/banner-1.png" alt="" style="width:100%;height:100%;">
          </a>
        </div>
        <!-- 商品分类列表 -->
        <div class="attrs-box">
          <div class="title">
            <h2>手机</h2>
            <a href="#">查看更多
              <i class="icon"></i>
            </a>
          </div>
          <div class="attrlist">
            <div class="big">
              <a href="#">
                <img v-lazy="'imgs/mix-alpha.jpg'" alt="">
              </a>
            </div>
            <div class="small">
              <ul>
                <li v-for="item in attrsList" :key="item.id">
                  <a href="#">
                    <div class="attrsbox">
                      <img v-lazy="item.imgUrl" alt="">
                      <h6>{{item.name}}</h6>
                      <p>{{item.text}}</p>
                      <p class="price">{{item.price}} 元起</p>
                    </div>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 导入swiper轮播图需要的组件
import { swiper, swiperSlide } from 'vue-awesome-swiper'

import 'swiper/dist/css/swiper.css'
export default {
  name: 'index',
  data() {
    return {
      // 轮播图所需要的数据
      foucsList: [
        {
          id: '1',
          imgUrl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b717c9c84e44409496e993ed6b526c05.jpg?thumb=1&w=1533&h=575&f=webp&q=90'
        },
        {
          id: '2',
          imgUrl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9c98d4ee217c03042cdaaef7226ffd37.jpg?w=2452&h=920'
        },
        {
          id: '3',
          imgUrl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b158441e01e7acd9ad27a49bbac4c0fa.jpg?thumb=1&w=1533&h=575&f=webp&q=90'
        },
        {
          id: '4',
          imgUrl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9721d9d8b6ee711d975c93b34f6a95ca.png?thumb=1&w=1533&h=575&f=webp&q=90'
        },
        {
          id: '5',
          imgUrl: '/imgs/slider/slide-5.jpg'
        }
      ],
      // 轮播图的配置
      swiperOption: {
        // autoplay: {
        //   delay: 2500
        // },
        loop: true,
        // 启动分页器
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        // 切换效果
        effect: 'cube',
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      },
      // 轮播图模块nav数据
      menuList: [
        {
          id: 1,
          caty1Name: '手机'
        },
        {
          id: 2,
          caty1Name: '电视',
          childList: []
        },
        {
          id: 3,
          caty1Name: '平板',
          childList: []
        },
        {
          id: 4,
          caty1Name: '家电',
          childList: []
        },
        {
          id: 5,
          caty1Name: '出行',
          childList: []
        },
        {
          id: 6,
          caty1Name: '路由器',
          childList: []
        },
        {
          id: 7,
          caty1Name: '电源',
          childList: []
        },
        {
          id: 8,
          caty1Name: '健康',
          childList: []
        },
        {
          id: 9,
          caty1Name: '耳机',
          childList: []
        }
      ],
      absList: [],
      attrsList: [],
      // nav图片数据
      navImgList: [
        {
          id: '1',
          name: 'XiaoMi 12 Pro',
          imgUrl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6c0553468a73cc445012577d8993dfc9.png?thumb=1&w=50&h=50&f=webp&q=90'
        },
        {
          id: 2,
          name: 'XiaoMi 12',
          imgUrl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ae8f6a46838f737d69290f12fd95de35.png?thumb=1&w=50&h=50&f=webp&q=90'
        },
        {
          id: 3,
          name: 'RedMi K50 Pro',
          imgUrl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c1f27bd990c9b9380fb7685639b3f503.png?thumb=1&w=50&h=50&f=webp&q=90'
        },
        {
          id: 4,
          name: 'RedMi K50',
          imgUrl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/199b6e1769dd4002b0e6373fd3a5dd0e.png?thumb=1&w=50&h=50&f=webp&q=90'
        }
      ]
    }
  },
  mounted() {
    this.getAbsList()
    this.getAttrsList()
  },
  components: {
    swiper,
    swiperSlide
  },
  methods: {
    async getAbsList() {
      const res = await this.$API.absList()
      this.absList = res.data
    },
    async getAttrsList() {
      const res = await this.$API.attrsList()
      this.attrsList = res.data
    }
  }
}
</script>

<style lang="scss" scoped>
.index {
  .foucs {
    position: relative;
    width: 100%;
    height: 460px;
    img {
      width: 100%;
      height: 100%;
    }
    .swiper-pagination {
      position: absolute;
      bottom: 2%;
      right: 5%;
    }
    .menu-nav {
      position: absolute;
      top: 0;
      left: 0;
      width: 234px;
      height: 420px;
      background-color: rgba($color: #717070, $alpha: 0.6);
      padding: 20px 0;
      font-size: 14px;
      z-index: 9;
      ul {
        position: relative;

        .menu-item {
          height: 42px;
          line-height: 42px;
          &:hover .product-item {
            display: block;
          }
          .itemName {
            top: 12px;
            display: block;
            color: #fff;
            padding-left: 35px;
            &:hover {
              background: #ff6600;
            }
            &::after {
              content: '';
              float: right;
              width: 16px;
              height: 16px;
              margin-top: 12px;
              margin-right: 20px;
              background: url('../../../public/imgs/icon-arrow.png') no-repeat center;
              background-size: contain;
            }
          }
          .product-item {
            display: none;
            position: absolute;
            top: -20px;
            left: 234px;
            width: 992px;
            height: 460px;
            background: #fff;
            .product {
              float: left;
              width: 208px;
              height: 40px;
              padding: 18px 20px;
              img {
                width: 40px;
                height: 40px;
                margin-right: 10px;
                vertical-align: middle;
              }
              .pro-item-name {
                display: block;
                color: black;
                &:hover {
                  color: #ff6600;
                }
              }
            }
          }
        }
      }
    }
  }
  .abs-box {
    .abs-top {
      width: 100%;
      padding: 30px 0 25px;
      ul {
        display: flex;
        justify-content: space-between;
        li {
          width: 290px;
          height: 170px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
  .attrs {
    width: 100%;
    background-color: #f5f5f5;
    padding-bottom: 40px;
    .banner {
      padding: 25px 0;
    }
    .attrs-box {
      position: relative;

      .title {
        height: 60px;
        line-height: 60px;
        font-size: 16px;
        a {
          position: absolute;
          top: 0;
          right: 0;
          color: black;
          .icon {
            display: inline-block;
            width: 20px;
            height: 20px;
            margin-left: 10px;
            background: url('../../../public/imgs/icon-right.png') no-repeat center;
            background-size: contain;
            background-color: #717070;
            border-radius: 50%;
            vertical-align: middle;
          }
          &:hover {
            color: #ff6600;
            .icon {
              background-color: #ff6600;
            }
          }
        }
      }
      .attrlist {
        width: 100%;
        height: 614px;
        margin-bottom: 20px;
        .big {
          float: left;
          width: 234px;
          height: 100%;
          overflow: hidden;
          &:hover img {
            transform: scale(1.05);
          }
          img {
            width: 100%;
            transition: all 0.3s;
          }
        }
        .small {
          float: left;
          ul {
            width: 992px;
            display: flex;
            flex-wrap: wrap;
            li {
              margin-left: 14px;
              background-color: #fff;
              overflow: hidden;
              &:nth-child(n + 5) {
                margin-top: 14px;
              }
              &:hover a {
                transform: scale(1.05);
              }
              a {
                display: block;
                width: 234px;
                height: 260px;
                padding: 20px 0;
                transition: all 0.3s;
                .attrsbox {
                  width: 160px;
                  margin: 0 auto;
                  text-align: center;
                  color: black;
                  h6 {
                    font-size: 16px;
                    margin: 15px 0 8px;
                  }
                  p {
                    color: #666;
                    margin-bottom: 14px;
                  }
                  .price {
                    color: #ff6600;
                    font-size: 16px;
                  }
                }
                img {
                  width: 160px;
                  height: 160px;
                }
              }
            }
          }
        }
      }
    }
  }
}
.swiper-pagination-bullet {
  margin-right: 5px;
}
.swiper-button-prev {
  left: 234px;
}
</style>
